<template>
  <div class="login">
    <div class="LoginBox">
      <div class="form">
      <el-form  label-width="0px" class="LoginForm" >
        <el-form-item >
          <el-input   prefix-icon="el-icon-s-custom" v-model="loginform.username"></el-input>
        </el-form-item>
        <el-form-item >
          <el-input   prefix-icon="el-icon-lock"  placeholder="请输入密码"  v-model="loginform.password" show-password></el-input>
        </el-form-item>
        <el-form-item class="btns">
          <el-button type="primary" v-on:click="login">登录</el-button>
          <el-button type="info" v-on:click="clear">重置</el-button>
        </el-form-item>
      </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data(){
    return{
      loginform:{
        username:'',
        password:''
      },
      responseResult: []
    }
  },
  methods:{

    login () {
      var _this = this
      console.log(this.$store.state)
      this.$axios
          .post('/login', {
            username: this.loginform.username,
            password: this.loginform.password
          })
          .then(successResponse => {
            console.log(successResponse.data)
            if (successResponse.data.code === 200) {

              this.$message({
                showClose: true,
                message:'密码正确',
                type:'success'
              })
              _this.$store.commit('login', _this.loginform)
              var path = this.$route.query.redirect
              this.$router.replace({path: path === '/' || path === undefined ? '/home' : path})
            }
            else{
              this.$message({
                showClose: true,
                message:'账号或密码错误',
                type:'error'
              })
            }
          })

    },
    clear(){
      this.loginform.username='';
      this.loginform.password='';
    }
  }
}
</script>

<style lang='less' scoped>
  .login{
    background-image: url("../assets/img/beijin2.jpg");
    height: 100%;
    background-size:100% 100%;
  }
  .LoginBox{
    width:450px ;
    height: 300px;
    background-color:rgba(255, 255, 255,0.5);
    border-radius: 12px;
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(50%,-50%);
  }
  .btns{
    display: flex;
    justify-content: flex-end ;
  }
  .LoginForm{
    position: absolute;
    bottom: 0;
    width:100%;
    padding: 0 20px;
    box-sizing: border-box;

  }
</style>
